<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
    .el-header, .el-footer {
        float: right;
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;

    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        /*text-align: center;*/
        /* line-height: 160px;+  */
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .login-register {
        float: right;
    }

    .tag {
        float: left;
        padding-left: 8%;
        padding-right: 1.5%;
    }

    /*下拉菜单*/
    .el-dropdown-link {

        cursor: pointer;
        color: #409EFF;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    /*点赞回复收藏*/
    .item {

        margin-top: 10px;
        margin-right: 40px;
    }
</style>
<body>
<div id="app">
    <el-container>
        <el-header>
            <span class="login-register" v-if="consumer==null"><a href="http://localhost:63342/blog/blog-client-controller/web/WEB-INF/login.html?_ijt=hlsi8vmj0la554u55stt1c0h90">登录</a> | <a
                    href="http://localhost:63342/blog/blog-client-controller/web/WEB-INF/register.html?_ijt=oldsanff87m94svlipr3hhf1kd">注册</a></span>

            <el-dropdown v-if="consumer!=null" @command="esc" style="float: right">
        <span class="el-dropdown-link">
            <span hidden>{{consumer.consumerUuid}}</span>
            {{consumer.consumerName}}
            <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a" @click="esc">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

        </el-header>
        <el-container>

            <el-aside width="300px">
                <div style="padding: 5%"></div>
                <div>
                    <div v-for="t in listTag" @click="addTagReadCount(t.tagUuid)">
                        <div><span @click="byTagUuidGetNoneHighlightBlogInfo(t.tagUuid)">{{t.tagName}} ({{t.readCount}})</span></div>
                        <div style="padding: 5%"></div>
                    </div>
                </div>
            </el-aside>

            <el-main>
<!--                <div>-->
<!--                    <div  style="padding-bottom:1%"><span style="font-size: 40px;">公告</span></div>-->
<!--                    <div v-for="nhb in listRootHighlightBlog">-->
<!--                        <div>-->
<!--                            <span hidden>{{nhb.blogUuid}}</span>-->
<!--                            <span hidden>{{nhb.tagUuid}}</span>-->
<!--                            <span>[{{nhb.tagName}}]</span>-->
<!--                            <span>{{nhb.blogTitle}}</span>-->
<!--                            <span hidden>{{nhb.blogAuthor}}</span>-->
<!--                            <span hidden>{{nhb.highlight}}</span>-->
<!--                            <span>{{nhb.consumerName}}</span>-->
<!--                            <span>{{nhb.blogPostDate}}</span>-->
<!--                        </div>-->

<!--                    </div>-->
<!--                </div>-->
<!--                <div style="padding: 2%;"></div>-->

                <div>
<!--                    <div>-->
<!--                        <div v-for="t in listTag" @click="addTagReadCount(t.tagUuid)">-->
<!--                            <span class="tag" @click="byTagUuidGetNoneHighlightBlogInfo(t.tagUuid)">{{t.tagName}}</span>-->
<!--                        </div>-->
<!--                        <div style="padding: 5%;"></div>-->
<!--                    </div>-->
                    <div>
                        <a v-bind:href="home" id="home" hidden></a>
                        <el-page-header @back="goBack" content="返回首页"></el-page-header>
                        <div style="padding: 2%;"></div>
                        <div>
                            <span>[{{blogInfo.tagName}}]</span>
                            <span>{{blogInfo.blogTitle}}</span>
                            <span>{{blogInfo.consumerName}}</span>
                            <span>{{blogInfo.blogPostDate}}</span>
                            <div style="padding-left: 6%">{{blogInfo.blogContent}}</div>
                            <span hidden>{{blogInfo.blogUuid}}</span>
                            <span hidden>{{blogInfo.tagUuid}}</span>
                            <span hidden>{{blogInfo.blogAuthor}}</span>
                            <span hidden>{{blogInfo.highlight}}</span>
                        </div>
                        <div style="padding: 2% 0% 2% 0%">
                            <el-badge :value="addThumbCount" class="item">
                                <el-button size="small" @click="thumbAdd(blogInfo.blogUuid)">点赞</el-button>
                            </el-badge>
                            <el-badge :value="1" class="item" type="primary">
                                <el-button size="small">评论</el-button>
                            </el-badge>
                            <el-badge :value="addCollectCount" class="item">
                                <el-button size="small" @click="collectAdd(blogInfo.blogUuid)">收藏</el-button>
                            </el-badge>
                            <el-badge class="item" type="primary">
                                <el-button size="small" @click="open">举报</el-button>
                            </el-badge>
                        </div>
                    </div>
                </div>

<!--                <div>-->
<!--                    <div class="block">-->
<!--                        <el-pagination-->
<!--                                @size-change="handleSizeChange"-->
<!--                                @current-change="handleCurrentChange"-->
<!--                                :current-page.sync="paginationVO.pageNum"-->
<!--                                :page-size="paginationVO.pageSize"-->
<!--                                layout="prev, pager, next, jumper"-->
<!--                                :total="1000">-->
<!--                        </el-pagination>-->
<!--                    </div>-->
<!--                </div>-->
            </el-main>

            <el-aside width="300px">
                <div style="padding: 5%"></div>
                <div>
                    <div v-for="t in listTag" @click="addTagReadCount(t.tagUuid)">
                        <div><span @click="byTagUuidGetNoneHighlightBlogInfo(t.tagUuid)">{{t.tagName}} ({{t.readCount}})</span></div>
                        <div style="padding: 5%"></div>
                    </div>
                </div>
            </el-aside>
        </el-container>
    </el-container>

</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            home: 'http://localhost:63342/blog/blog-client-controller/web/WEB-INF/home.html?_ijt=k4rfimk6cmev0ev3e0gamkatpr',
            addThumbCount: 0,
            addCollectCount: 0,
            consumer: {},
            listTag: [],
            blogInfo: {
                blogUuid: ""
            },
            listRootHighlightBlog: [],
            addTagReadCountVO: {
                tagUuid: ''
            },
            paginationVO: {
                pageNum: 1,
                pageSize: 10
            },
            paginationVO2: {
                pageNum: 1,
                pageSize: 3
            },
            byTagUuidGetNoneHighlightBlogInfoVO: {
                tagUuid: ''
            },
            blogUuidAndHighlightBlogInfoVO:{
                blogUuid: "",
                highlight: 0
            },
            thumbCountVO:{
                blogUuid: '',
            },
            thumbVO:{
                blogUuid: '',
                thumbUuid: ''
            },
            collectCountVO:{
                blogUuid: '',
            },
            collectVO:{
                blogUuid: '',
                collectUuid: ''
            },
            addCollectVO:{
                blogUuid: '',
                collectUuid: '',
                collectName: '我的收藏'
            }
        },
        mounted() {
            this.consumer = JSON.parse(localStorage.getItem("consumer"));
            this.blogUuidAndHighlightBlogInfoVO.blogUuid = JSON.parse(localStorage.getItem("blogUuid"));
            this.blogUuidAndHighlightBlogInfoVO.highlight = JSON.parse(localStorage.getItem("highlight"));
            this.getAllTag();
            this.blogUuidAndHighlightBlogInfo();
            this.getAllRootHighlightBlogInfo();
            this.thumbCount();
            this.collectCount();
        },
        methods: {
            goBack() {
                this.blogUuidAndHighlightBlogInfoVO = null;
                localStorage.removeItem("blogUuid");
                localStorage.removeItem("highlight");
                document.getElementById('home').click();
            },
            esc() {
                this.consumer = null;
                localStorage.removeItem("consumer");
                this.getAllTag();
                this.blogUuidAndHighlightBlogInfo();
                this.getAllRootHighlightBlogInfo();
            },
            thumbCount(){
                this.thumbCountVO.blogUuid = this.blogUuidAndHighlightBlogInfoVO.blogUuid;
                axios.post('http://127.0.0.1:8181/thumb/thumb-count',this.thumbCountVO).then(e => {
                    vm.addThumbCount = e.data.responseObject;
                })
            },
            collectCount(){
                this.collectCountVO.blogUuid = this.blogUuidAndHighlightBlogInfoVO.blogUuid;
                axios.post('http://127.0.0.1:8181/collect/collect-count',this.collectCountVO).then(e => {
                    vm.addCollectCount = e.data.responseObject;
                })
            },
            collectAdd(blogUuid){
                this.addCollectVO.blogUuid = blogUuid;
                this.addCollectVO.collectUuid = this.consumer.consumerUuid;

                this.collectVO.blogUuid = blogUuid;
                this.collectVO.collectUuid = this.consumer.consumerUuid;

                this.collectCountVO.blogUuid = blogUuid;

                axios.post('http://127.0.0.1:8181/collect/is-add-collect',this.collectVO).then(e => {
                    if (e.data.responseObject > 0){
                        axios.post('http://127.0.0.1:8181/collect/cancel-add-collect',this.collectVO).then(e => {
                            if (e.data.responseObject > 0){
                                this.thumbCount();
                                this.collectCount();
                            }
                        })
                    }
                    else if (e.data.responseObject == 0){
                        axios.post('http://127.0.0.1:8181/collect/add-collect',this.addCollectVO).then(e => {
                            if (e.data.responseObject > 0){
                                this.thumbCount();
                                this.collectCount();
                            }
                        })
                    }
                })
            },
            thumbAdd(blogUuid){
                this.thumbVO.blogUuid = blogUuid;
                this.thumbVO.thumbUuid = this.consumer.consumerUuid;
                this.thumbCountVO.blogUuid = blogUuid;

                axios.post('http://127.0.0.1:8181/thumb/is-add-thumb',this.thumbVO).then(e => {
                    console.log(e.data.responseObject)
                    if (e.data.responseObject > 0){
                        axios.post('http://127.0.0.1:8181/thumb/cancel-add-thumb',this.thumbVO).then(e => {
                            if (e.data.responseObject > 0){
                                this.thumbCount();
                                this.collectCount();
                            }
                        })
                    }
                    else if (e.data.responseObject == 0){
                        axios.post('http://127.0.0.1:8181/thumb/add-thumb',this.thumbVO).then(e => {
                            if (e.data.responseObject > 0){
                                this.thumbCount();
                                this.collectCount();
                            }
                        })
                    }
                })
            },
            blogUuidAndHighlightBlogInfo() {
                axios.post('http://127.0.0.1:8181/blog/by-blog-uuid-and-highlight-blog-info', this.blogUuidAndHighlightBlogInfoVO).then(e => {
                    vm.blogInfo = e.data.responseObject;
                })
            },
            byTagUuidGetNoneHighlightBlogInfo(tagUuid){
                this.byTagUuidGetNoneHighlightBlogInfoVO.tagUuid = tagUuid;
                axios.post('http://127.0.0.1:8181/blog/by-tagUuid-get-none-highlight-blog-info', this.byTagUuidGetNoneHighlightBlogInfoVO).then(e => {
                    vm.listNoneHighlightBlog = e.data.responseObject;
                })
            },
            // byBlogUuidGetNoneHighlightBlogInfo(blogUuid,highlight){
            //     this.byBlogUuidGetNoneHighlightBlogInfoVO.blogUuid = blogUuid;
            //     this.byBlogUuidGetNoneHighlightBlogInfoVO.highlight = highlight;
            //     axios.post('http://127.0.0.1:8181/blog/by-blogUuid-get-none-highlight-blog-info', this.byBlogUuidGetNoneHighlightBlogInfoVO).then(e => {
            //         vm.listNoneHighlightBlog = e.data.responseObject;
            //     })
            // },
            getAllRootHighlightBlogInfo() {
                axios.get('http://127.0.0.1:8181/blog/get-all-root-highlight-blogInfo', {
                    params: {
                        paginationVO: this.paginationVO2
                    }
                }).then(e => {
                    vm.listRootHighlightBlog = e.data.responseObject;
                })
            },
            getAllTag() {
                axios.get('http://127.0.0.1:8181/tag/get-all-tag').then(e => {
                    vm.listTag = e.data.responseObject;
                })
            },
            addTagReadCount(tagUuid) {
                vm.addTagReadCountVO.tagUuid = tagUuid;
                axios.post('http://127.0.0.1:8181/tag/add-tag-readCount', vm.addTagReadCountVO).then(() => {
                    vm.getAllTag();
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.paginationVO.pageNum = val;
                this.getAllTag();
                this.getNoneHighlightBlog();
                console.log(`当前页: ${val}`);
            },
            open() {
                this.$prompt('请输入举报内容', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                    // inputErrorMessage: '邮箱格式不正确'
                }).then(({ value }) => {

                    this.$message({
                        type: 'success',
                        message: '你的邮箱是: ' + value
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            }
        }
    })
</script>
</html>